<template>
  <div>
    <button v-on:click="incrementCounter">{{ counter }}</button>
  </div>
</template>

<script>
export default {
  name: 'ButtonCounter', // 改为多单词组件名
  data() { // data 必须是函数
    return {
      counter: 0
    }
  },
  methods: {
    incrementCounter() {
      this.counter += 1;
      this.$emit('increment'); // 触发父组件事件
    }
  }
}
</script>

<style scoped>
button {
  font-size: 20px;
  padding: 10px 20px;
  margin: 10px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
</style>